<template>
  <div class="loginPage">
    <el-card class="box-card">
      <img src="http://47.102.159.133:8888/img/login.481f3a1c.png" alt="">

      <div class="content">
        <div class="title">
          <h2>后台管理</h2>
        </div>
        <div class="input-group">
          <div class="input-row">
            <el-input size="medium" style="width: 280px;" v-model="username" placeholder="请输入账号/手机号"></el-input>
          </div>
          <div class="input-row">
            <el-input size="medium" style="width: 280px;" show-password v-model="password" placeholder="请输入密码"></el-input>
          </div>
        </div>
        <div class="btn-row">
          <el-button size="medium" type="primary" @click="login">登录</el-button>
        </div>
        <!-- <div class="register">注册账号</div> -->
        <div class="icon_btn">
          <img src="../../image/QQ.png" alt="">
          <img src="../../image/微信.png" alt="">
          <img src="../../image/icon_facebook.png" alt="">
          <img src="../../image/google (1).png" alt="">
          <img src="../../image/icon_新浪-纯色logo.png" alt="">
          <img src="../../image/支付宝认证.png" alt="">
        </div>
      </div>

    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  name: "LoginView",
  methods: {
    async login() {
      if (!this.username || !this.password) {
        return;
      }
      if(!localStorage.getItem("token")){
        let params = {
          username: this.username,
          password: this.password,
        };
        let res = await this.$http.postSyan(params)

        if (res.status === 200) {
          if(res.data.data.token){
            // localStorage.setItem('token',res.data.data.token );
            this.$store.commit("setToken", res.data.data.token);
            this.$router.push("/home")
          }
        }
      }else{
        this.$router.push("/home")
      }
    },
  },
  created(){
    if(localStorage.getItem("token")){
      this.$router.push("/home")
    }
  }
};
</script>

<style lang="scss" scoped>
.loginPage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: url("http://47.102.159.133:8888/img/bg-login.13f45daf.png");
  .content {
    float: right;
    display: flex;
    flex-direction: column;
    width: 320px;
    height: 200px;
    .title {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .input-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      .input-row {
        margin-bottom: 12px;
      }
    }
    .btn-row {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .el-button {
        width: 280px;
      }
    }
    .register {
      margin-top: 4px;
      text-align: right;
    }
  }
}
.box-card {
  width: 800px;
  height: 460px;
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  img {
    float: left;
    width: 400px;
    height: 290px;
    margin: 0 20px;
  }
}

.icon_btn {
  width: 220px;
  margin-left: 25px;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
}
.icon_btn img {
  width: 20px;
  height: 20px;
  margin: 0;
}


@font-face {
  font-family: "iconfont"; /* Project id 3721406 */
  src: url('//at.alicdn.com/t/c/font_3721406_apkljah1gbe.woff2?t=1666339236441') format('woff2'),
       url('//at.alicdn.com/t/c/font_3721406_apkljah1gbe.woff?t=1666339236441') format('woff'),
       url('//at.alicdn.com/t/c/font_3721406_apkljah1gbe.ttf?t=1666339236441') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\e65a";
}

.icon-google:before {
  content: "\ea0c";
}

.icon-zhifubaorenzheng:before {
  content: "\e624";
}

.icon-icon_xinlang-chunselogo:before {
  content: "\e65e";
}

.icon-weixin:before {
  content: "\e620";
}

.icon-QQ:before {
  content: "\e667";
}

</style>
